<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>about me</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/index.js"></script>
    <link rel="shortcut icon" href="../bitbug_favicon.ico" />
    <style>
        body {
            background: url(../img/bgc.png) no-repeat;
            margin: 0px;
            background-size: 100% 100%;
            background-attachment: fixed;
            font-size: 14px;
        }

        @font-face {
            font-family: 'icomoon';
            src: url('../font/fonts/icomoon.eot?ruwgg0');
            src: url('../font/fonts/icomoon.eot?ruwgg0#iefix') format('embedded-opentype'),
                url('../font/fonts/icomoon.ttf?ruwgg0') format('truetype'),
                url('../font/fonts/icomoon.woff?ruwgg0') format('woff'),
                url('../font/fonts/icomoon.svg?ruwgg0#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #050801;
            display: flex;
            /* flex-direction: column;
            justify-content: center;
            min-height: 100vh;
            align-items: center; */
        }

        a {
            padding: 50px 40px;
            color: #03e9f4;
            text-decoration: none;
            letter-spacing: 4px;
            text-transform: uppercase;
            position: relative;
            /* 多余的隐藏就可以实现转圈 */
            overflow: hidden;
            margin: 40px 30px;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
        }

        a:hover {
            color: #050801;
            background-color: #03e9f4;
            box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
        }

        a:nth-of-type(1) {
            filter: hue-rotate(290deg);
        }

        span {
            position: absolute;
        }

        @keyframes animatel {
            0% {
                left: -100%;
            }

            50% {
                left: 100%;
            }

            100% {
                left: 100%;
            }
        }

        @keyframes animatel2 {
            0% {
                top: -100%;
            }

            50% {
                top: 100%;
            }

            100% {
                top: 100%;
            }
        }

        @keyframes animatel3 {
            0% {
                right: -100%;
            }

            50% {
                right: 100%;
            }

            100% {
                right: 100%;
            }
        }

        @keyframes animatel4 {
            0% {
                bottom: -100%;
            }

            50% {
                bottom: 100%;
            }

            100% {
                bottom: 100%;
            }
        }

        span:nth-child(1) {
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, transparent, #03e9f4);
            top: 0;
            left: -100%;
            animation: animatel 1s linear infinite;
            animation-delay: 0s;
        }

        span:nth-child(2) {
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, #03e9f4);
            top: -100%;
            right: 0;
            animation: animatel2 1s linear infinite;
            animation-delay: 0.25s;
        }

        span:nth-child(3) {
            width: 100%;
            height: 2px;
            background: linear-gradient(to left, transparent, #03e9f4);
            right: -100%;
            bottom: 0;
            animation: animatel3 1s linear infinite;
            animation-delay: 0.5s;
        }

        span:nth-child(4) {
            width: 2px;
            height: 100%;
            background: linear-gradient(to top, transparent, #03e9f4);
            bottom: -100%;
            left: 0;
            animation: animatel4 1s linear infinite;
            animation-delay: 0.75s;
        }

        .understand {
            position: absolute;
            top: 20%;
            left: 32%;

        }

        .communicate {
            position: absolute;
            top: 20%;
            left: 55%;
        }

        .secret {
            font-family: icomoon;
            color: rgb(178, 39, 39);
            font-size: 50px;
            user-select: none;
            cursor: pointer;
            position: absolute;
            top: 58%;
            left: 51%;

        }

        /* 返回 */
        .callback a {
            font-family: icomoon;
            width: 50px;
            height: 50px;
            color: #ccc;
            user-select: none;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <!-- 了解me -->
    <a href="" class="understand">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        了解我
    </a>
    <!-- 与我沟通 -->
    <a href="" class="communicate">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        联系我
    </a>

    <div class="secret">
        
    </div>
    <div class="callback">
        <a href="../index/leap.html"></a>

    </div>
    <script src="../js/index2.js"></script>
</body>

</html>